<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 600px;
            /* height: 300px; */
            background: pink;
            margin: 0 auto;
            /* overflow: hidden; */
        }
        
        .son1 {
            width: 200px;
            height: 300px;
            background: skyblue;
            float: left;
        }
        
        .son2 {
            width: 390px;
            height: 300px;
            background: #f90;
            float: right;
        }
        
        .box2 {
            width: 600px;
            height: 300px;
            background: slateblue;
            margin: 0 auto;
        }
        
        .clear {
            clear: both;
        }
        
        .clearfic::after {
            /* 这个是css3的伪类写法 （不兼容ie）*/
            content: '';
            /* 内容为空 */
            height: 0;
            display: block;
            /* 转化为块 */
            visibility: hidden;
            /* 隐藏对象 */
            clear: both;
            /* 清楚两端 */
        }
        /* 为了解决低版本浏览器的兼容 */
        
        .clearfic {
            zoom: 1;
            /* 注意没有单位，目的解决ie6低版本浏览器 */
        }
        
        .clearfix::before,
        .clearfix::after {
            display: table;
            /* 转化为表格 */
            content: '';
        }
        
        .clearfix::after {
            clear: both;
            /* 清除两端 */
        }
        
        .clearfix {
            zoom: 1;
            /* 解决低版本兼容 */
        }
    </style>
</head>

<body>
    <div class="box1 ">
        <div class="son1 clearfix">大毛</div>
        <div class="son2">二毛</div>
        <div class="clear"></div>
    </div>
    <div class="box2"></div>
</body>
<!-- 两个大盒子，上下排列，第一个大盒子高度为auto或者不写子盒子用float 下面的会覆盖上面的
第一种加overflow: hidden 溢出隐藏法
-->

</html>